<link type="text/css" href="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>



<!-- 文档地址 https://zijieke.com/semantic-ui/collections/table.php -->
<table class="ui celled table" style="padding: 1rem;font-size: 14px">
	<thead>
		<tr>
			<th>标题</th>
			<th>标题</th>
			<th>标题</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				<div class="ui ribbon label">第一</div>
			</td>
			<td>空间</td>
			<td>空间</td>
		</tr>
		<tr>
			<td>空间</td>
			<td>空间</td>
			<td>空间</td>
		</tr>
		<tr>
			<td>空间</td>
			<td>空间</td>
			<td>空间</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<th colspan="3">
				<div class="ui right floated pagination menu">
					<a class="icon item">
						<i class="left chevron icon"></i>
					</a>
					<a class="item">1</a>
					<a class="item">2</a>
					<a class="item">3</a>
					<a class="item">4</a>
					<a class="icon item">
						<i class="right chevron icon"></i>
					</a>
				</div>
			</th>
		</tr>
	</tfoot>
</table>

<script type="text/javascript">
	//表格的项事件监听
	$('.table tr').click(function(){
		console.log($(this).index());
	});
	//分页按钮监听
	$('.pagination>a').click(function(){
		console.log('aitem');
	});
</script>